<template>
  <div class="app-container">
    <el-row :gutter="20" class="full-height clear-margin">
      <!--部门数据-->
      <el-col :span="4" :xs="24" class="full-height clear-padding" style="border-right: 1px solid #ddd">
        <div class="head-container" style="border-bottom: 1px solid #ddd">
          <el-input placeholder="请输入节点名称"
                    clearable
                    size="small"
                    prefix-icon="el-icon-search" />
        </div>
        <div class="head-container">
          <el-tree :props="defaultProps"
                   node-key="deptCode"
                   highlight-current
                   :expand-on-click-node="false"
                   :filter-node-method="filterNode"
                   ref="tree"
                   default-expand-all
                   @node-click="handleNodeClick" />
        </div>
      </el-col>
      <!--用户数据-->
      <el-col :span="20" :xs="24" class="clear-padding">
        <div class="head-container flex-center" style="border-bottom: 1px solid #ddd;">
          <div>
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item>页面模板（含左侧树）</el-breadcrumb-item>
              <el-breadcrumb-item v-if="currentDept.deptName">{{currentDept.deptName}}</el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <div style="text-align: right">
            <el-button type="primary"
                       plain
                       size="small">操作按钮1</el-button>
            <el-button type="danger"
                       plain
                       size="small">操作按钮2</el-button>
          </div>
        </div>

        <div class="body-container">
          <el-form :model="queryParams"
                   ref="queryForm"
                   class="queryForm"
                   :inline="true">
            <el-form-item label="搜索框：" prop="keywords">
              <el-input v-model="queryParams.keywords"
                        placeholder="请输入关键字"
                        clearable
                        size="small" />
            </el-form-item>
          </el-form>

          <el-table v-loading="loading"
                    :data="tableData"
                    @selection-change="handleSelectionChange">
            <el-table-column type="selection"
                             width="50"
                             align="center" />
            <el-table-column label="测试字段1"
                             align="center"
                             key="userName"
                             prop="userName" />
            <el-table-column label="测试字段2"
                             align="center"
                             key="name"
                             prop="name"
                             :show-overflow-tooltip="true" />
            <el-table-column label="测试字段3"
                             align="center"
                             key="deptName"
                             prop="dept.deptName"
                             :show-overflow-tooltip="true" />
            <el-table-column label="测试字段4"
                             align="center"
                             key="phone"
                             prop="phone"
                             width="120" />
            <el-table-column label="测试字段5"
                             align="center"
                             key="status"
                             :formatter="row => descriptionDictDataStatus(row.status, statusOptions)" />
            <el-table-column label="测试字段6"
                             align="center"
                             prop="createTime"
                             width="160"
                             :formatter="row => dateFormatter(row)" />
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button size="small"
                           type="primary"
                           plain
                           icon="el-icon-edit">编辑
                </el-button>
                <el-button size="small"
                           type="danger"
                           plain
                           icon="el-icon-delete">删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>

          <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
          />
        </div>

      </el-col>
    </el-row>

  </div>
</template>

<script>
export default {
  name: "User",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 用户表格数据
      tableData: [],
      form: {},
      defaultProps: {
        children: "children",
        label: "deptName"
      },
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        keywords: undefined,
        status: undefined,
      },
      // 当前选中节点
      currentDept: {}
    }
  },
  watch: {
    // 根据名称筛选部门树
    deptName(val) {
      this.$refs.tree.filter(val)
    }
  },
  created() {
    this.getList()
    // this.getDicts("sys_user_sex").then(response => {
    //   this.sexOptions = response.data
    // })
  },
  methods: {
    /** 查询用户列表 */
    getList() {
      this.loading = false
    },
    /** 转换部门数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children
      }
      return {
        id: node._id,
        label: '[' + node.deptCode + '] ' + node.deptName,
        children: node.children
      }
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    // 节点单击事件
    handleNodeClick(data) {
      // this.queryParams.deptCode = data.deptCode
      this.currentDept = data
      this.getList()
    },
    // 表单重置
    reset() {
      this.form = {}
      this.resetForm("form")
    },
    handleSelectionChange(selections) {

    }
  }
}
</script>

<style lang="scss">
  .queryForm {
    .el-form-item {
      margin-bottom: 10px;
    }
  }
</style>
